<template>
	<view class="content">
		<view class="whead">
			<view class="left backLeft">
				<view class="imgBox">
					<image src="../../static/img/back2.png" mode=""></image>
				</view>
				<view class="text">
					返回
				</view>
				
			</view>
			<view class="center logoCenter">
				商品详情--详情
			</view>
			<view class="right">
				<view class="imgBox">
					<image src="../../static/img/dian.png" mode=""></image>
				</view>
			</view>
		</view>
            <view class="news_list">
				<view class="header">
					<view class="header_box">
						<view class="price box">价格</view>
						<view class="bgt bg1">
						  <image src="../../static/img/bg.png"></image>
						</view>
						<view class="details box">详情</view>
						<view class="bgt bg2">
						  <image src="../../static/img/bg.png"></image>
						</view>
						<view class="price_trend box">价格走势</view>
						<view class="bgt bg3">
						  <image src="../../static/img/bg.png"></image>
						</view>
						<view class="complaint box">投诉</view>
					</view>
				</view>
				<view class="details_nr">联想轻薄笔记本  ideapad  330-15  i3-6006/4G/128G/银</view>
				<view class="banner">
					
					<view class="details_list">
						<view class="lists">
							<view class="left">核心参数:</view>
							<view class="right">i7处理器i7处理器i7处理器i7处理器</view>
						</view>
						<view class="lists">
								<view class="left">核心参数:</view>
								<view class="right">256G SSDi7处理器i7处理器i7处理器i7处理器i7处理器</view>
						</view>
						<view class="lists">
							<view class="left">核心参数:</view>
							<view class="right">8G DDR4i7处理器i7处理器i7处理器i7处理器i7处理器</view>
						</view>
						<view class="lists">
							<view class="left">核心参数:</view>
							<view class="right">i7处理器i7处理器i7处理器i7处理器</view>
						</view>
						<view class="lists">
								<view class="left">核心参数:</view>
								<view class="right">256G SSDi7处理器i7处理器i7处理器i7处理器i7处理器</view>
						</view>
						<view class="lists">
							<view class="left">核心参数:</view>
							<view class="right">8G DDR4i7处理器i7处理器i7处理器i7处理器i7处理器</view>
						</view>
					</view>
					
				</view>
				<view class="detailsBox">
					<image src="../../static/img/04.jpg" mode="widthFix"></image>
						
				</view>
			</view>
			
		<view class="goBack">
			
		</view>
	</view>
</template>

<script>
	import "../../static/css/main.css"
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="less">
	.content {
		text-align: center;
		height: 100%;
		background: #eee;
	}
    .news_list {
      padding-top: 13rpx;
      display: flex;
      flex-direction: column;
    }
    
    .news_list .header {
      border-bottom: 2rpx solid #666666;
    }
    
    .news_list .header .header_box {
      padding-left: 16rpx;
      display: flex;
      flex-direction: row;
    }
    
    .news_list .header .header_box .box {
      font-size: 28rpx;
      color: #666666;
      line-height: 56rpx;
      height: 56rpx;
      width: 20.7%;
      text-align: center;
    }
    
    .news_list .header .header_box .box:hover {
      border-bottom: 4rpx solid #d2000f;
    }
    
    .news_list .header .header_box .bgt image {
    
      width: 2rpx;
      height: 40rpx;
      margin-top: 10rpx;
    }
    
    .news_list .header .header_box .bg1 {
      margin-left: 7rpx;
      margin-right: 22rpx;
    }
    
    .news_list .header .header_box .bg2 {
      margin-left: 22rpx;
      margin-right: 14rpx;
    }
    
    .news_list .header .header_box .bg3 {
      margin-left: 14rpx;
      margin-right: 16rpx;
    }
    
    .news_list .details_nr {
      width: 718rpx;
      font-size: 28rpx;
      color: #666666;
      border-bottom: 2rpx solid #666666;
      padding-left: 32rpx;
      padding-right: 64rpx;
      display: block;
      word-break: break-all;
      word-wrap: break-word;
      line-height: 42rpx;
      padding-top: 2rpx;
      letter-spacing: 1rpx;
	  text-align: left;
    }
    
    .news_list .banner {
      clear: both; width: 100%;
      justify-content: flex-start;
      
      height: auto;
    }
    

    .news_list .banner .details_list {
      padding:10rpx 20rpx;
	  clear: both; width: 100%; height: auto; overflow: hidden;
    }
    
    .news_list .banner .details_list .lists {
      width: 50%; float: left; overflow: hidden;
    }
    
    .news_list .banner .details_list .lists .left {
      font-size: 20rpx;float: left;
      color: #666666;
      line-height: 48rpx;
      width: 90rpx;
    }
    
    .news_list .banner .details_list .lists .right {
      font-size: 14rpx; float: left; padding-right: 20rpx;
      color: #999;
      line-height: 48rpx;
      text-indent: 18rpx;
      width: calc(100% - 90rpx);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
	.detailsBox{clear: both; width: 100%; height: 100%; padding: 18rpx;
		uni-image{width: 100%;}
		image{width: 100%;}
	}
    .goBack{position: fixed; width: 70rpx; height: 70rpx; right: 20rpx; bottom: 100rpx;
		background: url(../../static/img/back.png) no-repeat;
		background-size: 100% 100%;
	}
</style>
